<template>
  <!-- <el-dialog
    center
    :close-on-click-modal="false"
    v-model="dialogSensorVisible"
    title="Sensor List"
    :before-close="handleClose"
  > -->
    <div class="datatable">
      <el-table
        :data="sensorList"
        border
        style="width: 100%; box-sizing: border-box"
      >
        <el-table-column
          :label="t(`module.table.Sn`)"
          :align="'center'"
          width="120"
        >
          <template #default="scope">
            <label>{{
              scope.row.type == 0
                ? "传感器"
                : scope.row.type == 1
                ? "开关"
                : "卷帘"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          :label="t(`module.table.Nickname`)"
          :align="'center'"
          width="120"
        />
        <el-table-column
          prop="area_name"
          :label="t(`module.table.Room`)"
          :align="'center'"
          width="120"
        />
        
        <el-table-column
          :label="t(`module.table.EquipmentType`)"
          :align="'center'"
          width="120"
        >
          <template #default="scope">
            <label>{{
              scope.row.type == 0
                ? "传感器"
                : scope.row.type == 1
                ? "开关"
                : "卷帘"
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          :label="t(`module.table.Status`)"
          :align="'center'"
          width="120"
          type="expand"
        >
          <template #default="props">
            <el-table :data="props.row.sub_button">
                <el-table-column label="Name" prop="name" />
                <el-table-column v-if="props.row.type == 0" label="Status">
                    <template #default="scope">
                        <label>{{ scope.row.status == 0 ? '正常' : scope.row.status == 1 ? '报警' : '故障' }}</label>
                    </template>
                </el-table-column>
                <el-table-column v-if="props.row.type == 1"  label="Status">
                    <template #default="scope">
                        <label>{{ scope.row.status == 0 ? '关' : scope.row.status == 1 ? '开' : '未知' }}</label>
                    </template>
                </el-table-column>
                <el-table-column v-if="props.row.type == 2"  label="Status">
                    <template #default="scope">
                        <label>{{ scope.row.status == 0 ? '关' : scope.row.status == 1 ? '开' : '未知' }}</label>
                    </template>
                </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20">
        <el-col :span="10" :offset="10">
          <el-pagination
            small
            background
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
            @current-change="changeHasBindDevicePage"
            :current-page="hasBindDevicePage"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  <!-- </el-dialog> -->
</template>

<script>
import { reactive, onMounted, toRefs, watch } from "vue";
import { useI18n } from "vue-i18n";
import API from "api";
export default {
  props: {
    selectedDeviceId: Number,
    showDialog: Boolean,
  },
  emits: ["closeDialog"],
  setup(props, ctx) {
    const { t } = useI18n();
    let state = reactive({
      sensorList: [],
      page: 1,
      dialogSensorVisible: false,
    });
    onMounted(() => {});

    watch(
      () => props.showDialog,
      (val) => {
        if (val) {
          initSensorList();
        }
        state.dialogSensorVisible = val;
      }
    );

    const initSensorList = () => {
      API.sensorList({
        page: state.page,
        device_id: props.selectedDeviceId,
      }).then((res) => {
        state.sensorList = res.data.list;
      });
    };
    const handleClose = () => {
      ctx.emit("closeDialog");
    };
    return {
      t,
      handleClose,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: block;
  padding: 2rem 1rem;
  font-size: 2rem;
  font-weight: bolder;
  text-align: left;
}
.search {
  display: flex;
  width: 30rem;
  padding: 1rem;
}
.datatable {
  box-sizing: border-box;
  padding: 0.625rem;
}
.ml-1 {
  margin-left: 1rem;
}
</style>
